<template>
  <!--维护表单的 meta -->
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>表单属性</span>
          </div>
        </template>
        <el-scrollbar height="600px">
          <form-base :meta="meta"/>
        </el-scrollbar>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>字段维护</span>
          </div>
        </template>
        <form-item-list :formMeta="meta"/>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>分栏</span>
          </div>
        </template>
        <opt-comp :formMeta="meta"></opt-comp>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>导出json</span>
          </div>
        </template>
      </el-card>
    </el-col>
    
  </el-row>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { ElRow, ElCol, ElCard, ElScrollbar } from 'element-plus'
  import { nfForm } from '../map'

  // 表单的基础属性
  import formBase from './part/form-base.vue'

  // 表单的子控件的列表
  import formItemList from './part/item-list.vue'

  import sub from './form-sub.vue'
  import rule from './form-rule.vue'
  import optComp from './form-option-comp.vue'
  
  // 延迟加载
  const _tabComp = {
    sub, // : defineAsyncComponent(() => import('./form-sub.vue')),
    rule, // : defineAsyncComponent(() => import('./form-rule.vue')),
    optComp, // : defineAsyncComponent(() => import('./form-option-comp.vue'))
  }

  export default defineComponent({
    name: 'nf-meta-help-form-card',
    components: {
      ElRow, ElCol, ElCard, ElScrollbar,
      formBase,
      formItemList,
      optComp,
      nfForm
    },
    props: {
      meta: [ Object ]
    },
    setup(props, context) {

      return {
        _tabComp
      }
    }
  })
</script>